<template>
  <div class="report-page">
    <!-- 顶部导航与日期栏 -->
    <div class="page-header">
      <div class="breadcrumbs">数据报表 > 日报表</div>
      <div class="date-bar">
        <span class="current-date">星期一 / 2025-11-10</span>
        <div class="date-btns">
          <el-button type="primary" class="date-btn active">今日</el-button>
          <el-button type="primary" plain class="date-btn">昨日</el-button>
          <el-button type="primary" plain class="date-btn">本周</el-button>
          <el-date-picker 
            v-model="currentDate" 
            type="date" 
            format="YYYY/MM/DD" 
            value-format="YYYY/MM/DD"
            class="date-picker"
          />
        </div>
      </div>
    </div>

    <!-- 数据概览卡片区 -->
    <div class="overview-cards">
      <div class="overview-card card-1">
        <div class="card-title">今日收款</div>
        <div class="card-value">¥29,800.98</div>
        <div class="card-meta">
          <span>昨日收款: <span class="meta-value">¥12,981.00</span></span>
          <span>本月收款: <span class="meta-value">¥598,690.00</span></span>
        </div>
      </div>
      <div class="overview-card card-2">
        <div class="card-title">今日出货</div>
        <div class="card-value">¥54,020.00</div>
        <div class="card-meta">
          <span>昨日出货: <span class="meta-value">¥1,298.00</span></span>
          <span>本月出货: <span class="meta-value">¥598,690.00</span></span>
        </div>
      </div>
      <div class="overview-card card-3">
        <div class="card-title">出货赠送</div>
        <div class="card-value">¥98,674.98</div>
        <div class="card-meta">
          <span>昨日赠送: <span class="meta-value">¥1,298.00</span></span>
          <span>本月赠送: <span class="meta-value">¥598,690.00</span></span>
        </div>
      </div>
      <div class="overview-card card-4">
        <div class="card-title">新增欠款</div>
        <div class="card-value">¥9,800.00</div>
        <div class="card-meta">
          <span>当前总欠款: <span class="meta-value">¥129,811.00</span></span>
          <span>今日欠款: <span class="meta-value">¥598,690.00</span></span>
        </div>
      </div>
    </div>

    <!-- 收款明细模块 -->
    <div class="module-section" ref="receiptSection">
      <div class="module-title">收款明细</div>
      <div class="receipt-summary">
        <div class="summary-total">
          <span class="summary-label">【收款类型】</span>
          <div class="total-value">¥88,752.00</div>
        </div>
        <div class="summary-types">
          <div class="type-item">年单收款<br>¥19,800.00</div>
          <div class="type-item">政策收款<br>¥19,800.00</div>
          <div class="type-item">现金收款<br>¥19,800.00</div>
          <div class="type-item">秒杀收款<br>¥19,800.00</div>
          <div class="type-item">账户还款<br>¥19,800.00</div>
          <div class="type-item">内部员工<br>¥19,800.00</div>
        </div>
        <div class="summary-brands">
          <div class="brand-item">品牌A<br>¥1,980.00</div>
          <div class="brand-item">品牌B<br>¥6,980.00</div>
          <div class="brand-item">品牌C<br>¥8,980.00</div>
          <div class="brand-item">品牌D<br>¥1,980.00</div>
        </div>
      </div>

      <div class="order-title">订单明细</div>
      <el-table
        :data="receiptOrderData"
        border
        class="order-table"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
      >
        <el-table-column prop="orderNo" label="订单编号"  />
        <el-table-column prop="shopName" label="门店名称"  />
        <el-table-column prop="receiptType" label="收款类型"   />
        <el-table-column prop="item" label="收费项目"   />
        <el-table-column prop="amount" label="收款金额"   />
        <el-table-column prop="arrears" label="欠款金额"  />
        <el-table-column prop="contact" label="联系人"   />
        <el-table-column prop="phone" label="手机号"  />
        <el-table-column prop="tutor" label="导师" />
        <el-table-column label="操作" width="80">
          <template #default>
            <el-button type="text" class="detail-btn">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="load-more" @click="toggleReceiptMore">
        {{ isReceiptMore ? '收起' : '下拉显示更多' }}
      </div>
    </div>

    <!-- 出货统计模块 -->
    <div class="module-section" ref="shipmentSection">
      <div class="module-title">出货统计</div>
      <div class="shipment-stats">
        <div class="stat-card">
          <div class="stat-title">今日出货 昨日对比曲线图</div>
          <div class="stat-value">¥123,688.00</div>
          <!-- ECharts 出货趋势图容器 -->
          <div class="chart-container">
            <div ref="shipmentTrendChart" class="chart" />
          </div>
          <div class="stat-list">
            <div class="stat-item">年单出货 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">正价出货 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">秒杀出货 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">特价出货 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">赠送出货 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">内部员工 ¥800.00 <span class="ratio">50%</span></div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-title">品牌消耗对比曲线图</div>
          <div class="stat-value">¥123,688.00</div>
          <!-- ECharts 品牌消耗图容器 -->
          <div class="chart-container">
            <div ref="brandConsumeChart" class="chart" />
          </div>
          <div class="stat-list">
            <div class="stat-item">品牌A消耗 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">品牌B消耗 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">品牌C消耗 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">品牌D消耗 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">品牌E消耗 ¥800.00 <span class="ratio">50%</span></div>
            <div class="stat-item">品牌F消耗 ¥800.00 <span class="ratio">50%</span></div>
          </div>
        </div>
      </div>

      <div class="order-title">订单明细</div>
      <el-table
        :data="shipmentOrderData"
        border
        class="order-table"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
      >
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="shopName" label="门店名称"  />
        <el-table-column prop="shipmentType" label="出货类型"  />
        <el-table-column prop="brand" label="出货品牌" />
        <el-table-column prop="deduct" label="扣款金额"  />
        <el-table-column prop="retailTotal" label="零售价总价"  />
        <el-table-column prop="account" label="扣款账户" >
          <template #default="scope">
            <el-tag :type="getAccountTagType(scope.row.account)">{{ scope.row.account }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="账户余额"  />
        <el-table-column prop="tutor" label="导师"  />
        <el-table-column label="操作" >
          <template #default>
            <el-button type="text" class="detail-btn">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="load-more" @click="toggleShipmentMore">
        {{ isShipmentMore ? '收起' : '下拉显示更多' }}
      </div>
    </div>

    <!-- 赠送明细模块 -->
    <div class="module-section" ref="giftSection">
      <div class="module-title">赠送明细</div>
      <div class="gift-summary">
        <div class="gift-card">
          <div class="gift-title">赠送现金</div>
          <div class="gift-value">¥29,800.98</div>
          <div class="gift-meta">
            <span>昨日 <span class="meta-value">¥3,688.00</span></span>
            <span>本月赠送 <span class="meta-value">¥3,688.00</span></span>
          </div>
        </div>
        <div class="gift-card">
          <div class="gift-title">赠送零售价</div>
          <div class="gift-value">¥129,800.98</div>
          <div class="gift-meta">
            <span>昨日 <span class="meta-value">¥3,688.00</span></span>
            <span>本月赠送 <span class="meta-value">¥1,298.00</span></span>
          </div>
        </div>
        <div class="gift-card">
          <div class="gift-title">赠送产品</div>
          <div class="gift-value">¥29,800.98</div>
          <div class="gift-meta">
            <span>昨日 <span class="meta-value">¥3,688.00</span></span>
            <span>本月赠送 <span class="meta-value">¥1,298.00</span></span>
          </div>
        </div>
        <div class="gift-card">
          <div class="gift-title">其他赠送</div>
          <div class="gift-value">5</div>
          <div class="gift-meta">
            <span>(记录)</span>
          </div>
        </div>
        <div class="gift-filter">
          <div class="filter-title">点击切换类型</div>
          <el-radio-group v-model="giftFilterType">
            <el-radio-button label="type">按赠送类型</el-radio-button>
            <el-radio-button label="brand">按品牌分类</el-radio-button>
          </el-radio-group>
          <el-checkbox-group v-model="selectedBrands" v-if="giftFilterType === 'brand'">
            <el-checkbox label="品牌A" />
            <el-checkbox label="品牌B" />
          </el-checkbox-group>
        </div>
      </div>

      <div class="order-title">订单明细</div>
      <el-table
        :data="giftOrderData"
        border
        class="order-table"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
      >
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="shopName" label="门店名称"   />
        <el-table-column prop="giftType" label="赠送类型"  />
        <el-table-column prop="brand" label="归属品牌"   />
        <el-table-column prop="amount" label="金额"  />
        <el-table-column prop="retailPrice" label="出货零售价"  />
        <el-table-column prop="contact" label="联系人"  />
        <el-table-column prop="phone" label="手机号"   />
        <el-table-column prop="tutor" label="导师"   />
        <el-table-column label="操作"  >
          <template #default>
            <el-button type="text" class="detail-btn">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="load-more" @click="toggleGiftMore">
        {{ isGiftMore ? '收起' : '下拉显示更多' }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';

// 日期状态
const currentDate = ref('2025/11/10');

// 模块展开状态
const isReceiptMore = ref(false);
const isShipmentMore = ref(false);
const isGiftMore = ref(false);

// 赠送筛选状态
const giftFilterType = ref('type');
const selectedBrands = ref([]);

// ECharts 实例引用
const shipmentTrendChart = ref(null);
const brandConsumeChart = ref(null);

// 收款订单数据
const receiptOrderData = ref([
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    receiptType: '政策收款',
    item: '年会方案',
    amount: '¥200,000.00',
    arrears: '¥2,000.00',
    contact: '张燕',
    phone: '18805157146',
    tutor: '金金'
  },
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    receiptType: '政策收款',
    item: '年会方案',
    amount: '¥200,000.00',
    arrears: '¥2,000.00',
    contact: '张燕',
    phone: '18805157146',
    tutor: '金金'
  },
  {
    orderNo: 'MCC30924',
    shopName: '克缇缇娜美容',
    receiptType: '秒杀收款',
    item: '年会方案',
    amount: '¥200,000.00',
    arrears: '¥2,000.00',
    contact: '张燕',
    phone: '18805157146',
    tutor: '金金'
  }
]);

// 出货订单数据
const shipmentOrderData = ref([
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    shipmentType: '正价出货',
    brand: '石室翁',
    deduct: '¥2,000.00',
    retailTotal: '¥200,000.00',
    account: '年单账户',
    balance: '¥719,791.00',
    tutor: '金金'
  },
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    shipmentType: '特价出货',
    brand: '甄药',
    deduct: '¥2,000.00',
    retailTotal: '¥200,000.00',
    account: '现金账户',
    balance: '¥719,791.00',
    tutor: '金金'
  },
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    shipmentType: '秒杀出货',
    brand: '甄药',
    deduct: '¥5,000.00',
    retailTotal: '¥200,000.00',
    account: '现金账户',
    balance: '¥719,791.00',
    tutor: '金金'
  }
]);

// 赠送订单数据
const giftOrderData = ref([
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    giftType: '赠送现金',
    brand: '石室翁',
    amount: '¥200,000.00',
    retailPrice: '¥2,000.00',
    contact: '张燕',
    phone: '18805157146',
    tutor: '金金'
  },
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    giftType: '赠送零售价',
    brand: '蓝妮儿·甄药',
    amount: '¥200,000.00',
    retailPrice: '¥2,000.00',
    contact: '张燕',
    phone: '18805157146',
    tutor: '金金'
  },
  {
    orderNo: 'MCC30924',
    shopName: '陈燕萍美容',
    giftType: '赠送产品',
    brand: '兰蔻',
    amount: '¥200,000.00',
    retailPrice: '¥2,000.00',
    contact: '张燕',
    phone: '18805157146',
    tutor: '金金'
  }
]);

// 账户标签类型
const getAccountTagType = (account) => {
  const types = {
    '年单账户': 'success',
    '现金账户': 'warning',
    '政策账户': 'primary',
    '内部员工': 'info'
  };
  return types[account] || '';
};

// 初始化ECharts图表
const initEcharts = () => {
  // 1. 出货趋势图
  const shipmentChart = echarts.init(shipmentTrendChart.value);
  shipmentChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['10-13', '10-14', '10-15', '10-16', '今日', '10-18'],
      axisLine: { lineStyle: { color: '#ccc' } }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#ccc' } },
      splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } }
    },
    series: [
      {
        name: '今日出货',
        type: 'line',
        data: [2132133, 213213, 43445, 56546, 787687, 0],
        smooth: true,
        lineStyle: { width: 3, color: '#1890ff' },
        itemStyle: { color: '#1890ff', borderWidth: 2 },
        areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(24, 144, 255, 0.2)' }, { offset: 1, color: 'rgba(24, 144, 255, 0)' }] } }
      },
      {
        name: '昨日对比',
        type: 'line',
        data: [115000, 117000, 116000, 119000, 120000, 0],
        smooth: true,
        lineStyle: { width: 2, type: 'dashed', color: '#fa8c16' },
        itemStyle: { color: '#fa8c16' }
      }
    ]
  });

  // 2. 品牌消耗图
  const brandChart = echarts.init(brandConsumeChart.value);
  brandChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['10-13', '10-14', '10-15', '10-16', '今日', '10-18'],
      axisLine: { lineStyle: { color: '#ccc' } }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#ccc' } },
      splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } }
    },
    series: [
      {
        name: '品牌A',
        type: 'line',
        data: [200, 820, 310, 490, 1230, 0],
        smooth: true,
        lineStyle: { color: '#1890ff' }
      },
      {
        name: '品牌B',
        type: 'line',
        data: [780, 800, 820, 770, 800, 0],
        smooth: true,
        lineStyle: { color: '#52c41a' }
      },
      {
        name: '品牌C',
        type: 'line',
        data: [820, 810, 790, 830, 800, 0],
        smooth: true,
        lineStyle: { color: '#fa8c16' }
      }
    ]
  });

  // 监听窗口 resize 自动适配
  window.addEventListener('resize', () => {
    shipmentChart.resize();
    brandChart.resize();
  });
};

// 模块展开/收起
const toggleReceiptMore = () => {
  isReceiptMore.value = !isReceiptMore.value;
  // 实际项目可动态加载数据
};
const toggleShipmentMore = () => {
  isShipmentMore.value = !isShipmentMore.value;
};
const toggleGiftMore = () => {
  isGiftMore.value = !isGiftMore.value;
};

// 页面挂载后初始化图表
onMounted(() => {
  initEcharts();
});

// 监听日期变化（示例）
watch(currentDate, (newVal) => {
  ElMessage.info(`已切换至 ${newVal} 的数据`);
  // 实际项目可重新请求数据并更新图表
});
</script>

<style scoped>
.report-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #f9f9f9;
  transition: all 0.3s ease;
}

/* 顶部导航 */
.page-header {
  margin-bottom: 20px;
}
.breadcrumbs {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.date-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.current-date {
  font-size: 14px;
  color: #333;
}
.date-btns {
  display: flex;
  gap: 8px;
}
.date-btn {
  padding: 6px 12px;
  border-radius: 4px;
}
.date-btn.active {
  background: #1890ff;
  border-color: #1890ff;
}
.date-picker {
  width: 140px;
}

/* 数据概览卡片 */
.overview-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.overview-card {
  flex: 1;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.overview-card:hover {
  transform: translateY(-3px);
}
.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.card-value {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
.card-1 .card-value { color: #1890ff; }
.card-2 .card-value { color: #52c41a; }
.card-3 .card-value { color: #fa8c16; }
.card-4 .card-value { color: #faad14; }
.card-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}
.meta-value {
  font-weight: 500;
}
.card-1 .meta-value { color: #1890ff; }
.card-2 .meta-value { color: #52c41a; }
.card-3 .meta-value { color: #fa8c16; }
.card-4 .meta-value { color: #faad14; }

/* 模块通用样式 */
.module-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.module-section:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.module-title {
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 15px;
}
.order-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 15px 0 10px;
}
.order-table {
  --el-table-border-color: #e8e8e8;
  margin-bottom: 10px;
}
.detail-btn {
  color: #f5222d;
  padding: 0;
}
.load-more {
  text-align: center;
  color: #1890ff;
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
  transition: color 0.2s ease;
}
.load-more:hover {
  color: #096dd9;
}

/* 收款明细 */
.receipt-summary {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 15px;
}
.summary-total {
  width: 120px;
  text-align: center;
}
.summary-label {
  font-size: 12px;
  color: #666;
}
.total-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.summary-types {
  flex: 1;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.type-item {
  text-align: center;
  font-size: 12px;
  color: #666;
}
.summary-brands {
  width: 240px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.brand-item {
  text-align: center;
  font-size: 12px;
  color: #1890ff;
}

/* 出货统计 */
.shipment-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.stat-card {
  flex: 1;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
}
.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}
.chart-container {
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
  height: 230px; /* 图表高度 */
}
.chart {
  width: 100%;
  height: 100%;
}
.stat-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stat-item {
  font-size: 12px;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.ratio {
  color: #fa8c16;
}

/* 赠送明细 */
.gift-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}
.gift-card {
  width: calc(23% - 15px);
  background: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
  text-align: center;
}
.gift-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.gift-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.gift-meta {
  font-size: 12px;
  color: #666;
}
.gift-filter {
  width: 100%;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.filter-title {
  font-size: 14px;
  color: #666;
}
</style>